<template>
    <div class="advance-row">
        <h4 class="label">{{label}}</h4>
        <div class="form-node">
            <div class="node">
                <slot></slot>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "AdvanceRow",
        props: {
            label: String
        }
    }
</script>

<style scoped lang="scss">
    @import "../../../assets/scss/define";
    .advance-row {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 55px;
        overflow: hidden;

        > .label {
            color: $base-color;
            flex: 1;
            text-align: right;
        }
        > .form-node {
            flex: 8;
            height: 100%;
            padding-left: 20px;
            padding-right: 20px;

            > .node {
                height: 100%;
                border-bottom: 1px solid $border-color;
                display: flex;
                align-items: center;
            }
        }
    }
</style>